<template>
    <div>
        房间名称:<input type="text" v-model="ts.name">
        状态:<input type="checkbox" v-model="ts.state">勾选为true,否则false
        <input type="button" value="查询" @click="c">
        <input type="button" value="重置" @click="cc">
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>房间名称</td>
                    <td>门市价格</td>
                    <td>房间数</td>
                    <td>房间号</td>
                    <td>状态</td>
                    <td>是否删除</td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td>{{ a.houseId }}</td>
                    <td>{{ a.houseName }}</td>
                    <td>
                        ${{ a.price }}
                    </td>
                    <td>{{ a.numCount }}</td>
                    <td>{{ a.numHao }}</td>
                    <td>{{ a.state?"启用":"禁用" }}</td>
                    <td>{{ a.isDelete }}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="luo(a.houseId)">
                        <input type="button" value="修改" @click="xiu(a.houseId)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
        当前第{{ ts.index }}页 共{{ zys.list }}条 每页{{ ts.size }}条 共{{ zys.row }}页
        <input type="number" v-model="ts.index">
        <input type="button" value="眺转" @click="tiao()">
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ref,onMounted } from 'vue';
const routher = useRouter();
onMounted(()=>{
    show()
})
const luo=(e:any)=>{
    if(!confirm("确认删除吗")){
        return
    }
    axios.delete("https://localhost:7264/api/House/DelHouse",{params:{id:e}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else{
            alert("删除失败")
        }
    })
}
const xiu=(val:any)=>{
    routher.push({path:"/upd",query:{id:val}})
}
const tiao=()=>{
    show()
}
const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}
//重置
const cc=()=>{
    ts.value={
        index:1,
        size:2,
        name:'',
        state:null
    }
    show()
}
//查询
const c=()=>{
    show()
}
const ts=ref({
    index:1,
    size:2,
    name:'',
    state:null
})
const zys=ref({
    list:0,
    row:0
})
const show=()=>{
    axios.get("https://localhost:7264/api/House/Show",{params:ts.value}).then(res=>{
        date.value=res.data.row

        zys.value.list=res.data.list
        zys.value.row=Math.ceil(res.data.list/ts.value.size)
    })
}

const date=ref([{
    "houseId": 0,
    "houseName": "",
    "price": 0,
    "numCount": 0,
    "numHao": "",
    "state": null,
    "isDelete": false
}])
</script>

<style scoped>

</style>